<template>
  <div class="login-page">
    <div class="login-container">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="brand-logo">
            <n-avatar :size="80" :src="logoUrl" color="transparent">
              <template #fallback>
                <n-icon :size="40">
                  <HomeOutline />
                </n-icon>
              </template>
            </n-avatar>
          </div>
          <h1 class="brand-title">三角洲数据查询攻略站</h1>
          <p class="brand-subtitle">Operation Delta</p>
          <p class="brand-description">专业的游戏物品数据分析平台</p>
          
          <div class="features">
            <div class="feature-item">
              <n-icon :size="20" color="#18a058">
                <CheckmarkCircleOutline />
              </n-icon>
              <span>整点数据更新</span>
            </div>
            <div class="feature-item">
              <n-icon :size="20" color="#18a058">
                <CheckmarkCircleOutline />
              </n-icon>
              <span>专业数据分析</span>
            </div>
            <div class="feature-item">
              <n-icon :size="20" color="#18a058">
                <CheckmarkCircleOutline />
              </n-icon>
              <span>个性化收藏</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="form-section">
        <div class="form-container">
          <div class="form-header">
            <n-tabs
              v-model:value="activeTab"
              type="segment"
              size="large"
              :animated="true"
              class="auth-tabs"
            >
              <n-tab-pane name="login" tab="登录">
                <LoginForm
                  @success="handleLoginSuccess"
                  @switch-to-register="activeTab = 'register'"
                  @forgot-password="activeTab = 'forgot'"
                />
              </n-tab-pane>
              
              <n-tab-pane name="register" tab="注册">
                <RegisterForm
                  @success="handleRegisterSuccess"
                  @switch-to-login="activeTab = 'login'"
                />
              </n-tab-pane>
              
              <n-tab-pane name="forgot" tab="找回密码">
                <ForgotPasswordForm
                  @success="handleForgotPasswordSuccess"
                  @back-to-login="activeTab = 'login'"
                />
              </n-tab-pane>
            </n-tabs>
          </div>
        </div>
        
        <!-- 返回首页 -->
        <div class="back-home">
          <n-button
            text
            type="primary"
            @click="router.push('/')"
            class="back-btn"
          >
            <template #icon>
              <n-icon>
                <ArrowBackOutline />
              </n-icon>
            </template>
            返回首页
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import { useUserStore } from '@/stores/user'
import LoginForm from '@/components/user/LoginForm.vue'
import RegisterForm from '@/components/user/RegisterForm.vue'
import ForgotPasswordForm from '@/components/user/ForgotPasswordForm.vue'
import logoSvg from '@/assets/logo.svg'
import {
  HomeOutline,
  CheckmarkCircleOutline,
  ArrowBackOutline
} from '@vicons/ionicons5'

const router = useRouter()
const route = useRoute()
const message = useMessage()
const userStore = useUserStore()

// 当前激活的标签页
const activeTab = ref('login')
const logoUrl = ref(logoSvg)

// 处理登录成功
const handleLoginSuccess = () => {
  message.success('登录成功')
  
  // 获取重定向地址
  const redirect = route.query.redirect as string
  if (redirect) {
    router.push(redirect)
  } else {
    router.push('/user/profile')
  }
}

// 处理注册成功
const handleRegisterSuccess = () => {
  message.success('注册成功')
  
  // 注册成功后跳转到个人中心
  router.push('/user/profile')
}

// 处理找回密码成功
const handleForgotPasswordSuccess = () => {
  message.success('密码重置成功，请重新登录')
  activeTab.value = 'login'
}

// 组件挂载时检查登录状态
onMounted(() => {
  // 如果已经登录，直接跳转
  if (userStore.isLoggedIn) {
    const redirect = route.query.redirect as string
    router.push(redirect || '/user/profile')
    return
  }
  
  // 根据路由参数设置默认标签页
  const tab = route.query.tab as string
  if (tab && ['login', 'register', 'forgot'].includes(tab)) {
    activeTab.value = tab
  }
})
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  width: 100%;
  background: var(--n-card-color);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 600px;
}

/* 品牌区域 */
.brand-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-content {
  text-align: center;
  max-width: 300px;
}

.brand-logo {
  margin-bottom: 24px;
}

.brand-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.brand-subtitle {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 16px 0;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.brand-description {
  font-size: 14px;
  margin: 0 0 32px 0;
  opacity: 0.8;
  line-height: 1.5;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.9;
}

/* 表单区域 */
.form-section {
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-tabs {
  width: 100%;
}

.back-home {
  text-align: center;
  margin-top: 20px;
}

.back-btn {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    grid-template-columns: 1fr;
    max-width: 400px;
    min-height: auto;
  }
  
  .brand-section {
    padding: 40px 20px;
  }
  
  .brand-title {
    font-size: 24px;
  }
  
  .brand-subtitle {
    font-size: 14px;
  }
  
  .form-section {
    padding: 40px 20px 20px;
  }
}

@media (max-width: 480px) {
  .login-page {
    padding: 10px;
  }
  
  .brand-section {
    padding: 30px 15px;
  }
  
  .brand-title {
    font-size: 20px;
  }
  
  .form-section {
    padding: 30px 15px 15px;
  }
}
</style>
